<template>
  <div id="app">
    <el-container v-if="isLogin">
      <el-header><Header @changeLogin="changeLogin" :user="user"></Header></el-header>
      <el-container>
        <el-aside width="202px" :style="menuHeight"><Menu :menus="menus"></Menu></el-aside>
        <el-container :style="menuHeight">
          <el-main><router-view /></el-main>
          <el-footer><Footer></Footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
    <login v-if="!isLogin" @changeLogin="changeLogin"></login>
  </div>
</template>
<script>
import Menu from "./components/Menu";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Login from "./components/Login";
import Vue from "vue";
import { USER } from "@/common/Constant";
export default {
  components: { Menu, Header, Footer, Login },
  data() { return { menus: [], user: {}, isLogin: Vue.ls.get(USER) != null, }; },
  computed: {
    menuHeight() { return "height: " + (document.documentElement.clientHeight - 65) + "px"; },
  },
  created() { if (Vue.ls.get(USER)) { this.menus = Vue.ls.get(USER).menus; this.user = Vue.ls.get(USER).user; } },
  methods: {
    changeLogin(status) { this.isLogin = status; if (status) { this.menus = Vue.ls.get(USER).menus; this.user = Vue.ls.get(USER).user; } },
  },
};
</script>
<style scoped lang="scss">
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
.el-table th.gutter { display: table-cell !important; }
.el-header { background-color: #667594; text-align: center; height: 80px; padding: 0; }
.el-footer { background-color: #667594; text-align: center; height: 20px; padding: 0; }
.el-aside { background-color: #545c64; text-align: center; }
.el-main { background-color: #e9eef3; }
body > .el-container { margin-top: 0px; }
body, html { padding: 0; margin: 0px; }
</style>
